<template>
  <div class="main">
    <div>
      <back-to-home-logo></back-to-home-logo>
    </div>
    <div class="box">
      <el-steps direction="vertical" :space="200" :active="active" finish-status="success">
        <el-step title="验证注册邮箱"></el-step>
        <el-step title="重新填写密码"></el-step>
        <el-step title="成功修改密码"></el-step>
      </el-steps>
    </div>
    <div class="card">
      <el-form :model="form" :rules="rules" status-icon ref="form">
        <el-form-item prop="email" >
          <el-input v-model="form.email" placeholder="请输入合法的邮箱"
                    prefix-icon="el-icon-s-promotion" size="large"></el-input>
        </el-form-item>
        <el-form-item prop="emailCode">
          <el-space size="large">
            <el-input v-model="form.emailCode" style="width: 300px"
                      maxlength="6" placeholder="请输入验证码" prefix-icon="el-icon-warning"></el-input>
            <el-button plain @click="sendCode" :width="'100px'" :disabled="!canClick">{{ sendCodeContent }}</el-button>
          </el-space>
        </el-form-item>
      </el-form>



    </div>

    <div class="button">
      <el-button style="margin-top: 12px;" @click="next('form')">{{content}}</el-button>
    </div>

  </div>

</template>

<script>
import BackToHomeLogo from "../../../components/BackToHomeLogo";
import axios from "axios";
import qs from "qs";
export default {
  name: "Retrieve",
  components:{
    BackToHomeLogo,
  },
  data() {
    const emailCheck = (rule, value, callback) => {
      if (value === ''){
        callback(new Error('请输入邮箱'))
      } else {
        const reg = /^([a-z0-9]+[_|\_|\.]?)*[a-z0-9]+@([a-z0-9]+[_|\_|\.]?)*[a-z0-9]+\.[a-z]{2,3}$/
        if (!reg.test(value)) {
          callback(new Error('请输入正确的邮箱格式'))
        } else {
          callback()
        }
      }
    }
    return {
      content: '下一步',
      sendCodeContent: '发送验证码',
      totalTime: 5,
      canClick: true,
      form: {
        email: '',
        emailCode: ''
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {validator: emailCheck, trigger: 'blur'}
        ],
        emailCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    next(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = {
            emailCode: this.form.emailCode
          }
          localStorage.setItem('email', this.form.email)
          axios.post('/api/retrieve/code', qs.stringify(data)).then((res) => {
            if (res.data.code === 0) {
              this.$router.push('/login/retrieve/new_password')
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      })
    },
    sendCode(){
      if(this.form.email !== '') {
        const data = {
          email: this.form.email
        }
        axios.post('/api/retrieve/verify', qs.stringify(data)).then((res) => {
          if (res.data.code === 0) {
            this.$message.success({
              showClose: true,
              message: '发送验证码成功',
              duration: 1500
            })
          } else {
            this.$notify.error(res.data.msg)
          }
        })
      } else {
        this.$message.error('请输入您的邮箱')
        return
      }

      if(!this.canClick) return
      this.canClick = false
      this.sendCodeContent = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.sendCodeContent = this.totalTime + 's后重新发送'
        if(this.totalTime < 0) {
          window.clearInterval(clock)
          this.totalTime = 5
          this.canClick = true
          this.sendCodeContent = '重新发送'
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.box {
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 450px;
  margin: auto;
}

.button {
  height: 500px;
  position: absolute;
  top: 600px;
  right: 600px;
  margin: auto;
}

/*.card {*/
/*  position: absolute;*/
/*  top: 400px;*/
/*  bottom: 0;*/
/*  left: 750px;*/
/*  margin: auto;*/
/*}*/


.card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*position: relative;*/
  box-sizing: border-box;
  width: 500px;
  height: 200px;
  padding: 20px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}
.el-input__inner{   /*或者 .s2>>>.el-input__inner  */
  /*background:rgba(0,0,0,0.2);    !*调整inner的背景色，透明*!*/
  border-radius: 50px;    /*输入框圆角值*/
}

.main {
  position: fixed;
  width: 100%;
  height: 100%;

  background-image: url('../img/LoginBackgroundImg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>